
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>flipclock</title>
	<link rel="stylesheet" href="./flipclock.css">
	<link rel="stylesheet" href="./index.css">
	<style>
		.back{
			width: 4rem;
			height: 4rem;
			position: fixed;
			background: rgb(29, 29, 29);
			border-radius: 0.5rem;
			color: white;
			top: env(safe-area-inset-top);
    		top: constant(safe-area-inset-top);
			left: 2rem;
			margin-top: 0.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 1.4rem;
			opacity: 0;
			user-select: none;
			-webkit-user-select: none;
			transition: opacity ease 1s;
		}
	</style>

</head>
<body>
	<div class="back">←</div>
	<div class="clock_container">
		<!-- ↓↓↓↓↓↓↓↓↓↓ 竖屏幕 -->
		<div class="portrait">
			<div class="clock hours"></div>
			<div class="clock minutes"></div>
			<div class="clock seconds"></div>
		</div>
		<!-- ↑↑↑↑↑↑↑↑↑↑ 竖屏幕 -->

		<!-- ↓↓↓↓↓↓↓↓↓↓ 横屏幕 -->
		<div class="landscape">
			<div class="clock"></div>
		</div>
		<!-- ↑↑↑↑↑↑↑↑↑↑ 横屏幕 -->
		
	</div>
</body>
<script src="./jquery_v1.10.2 .js"></script>
<script src="./flipclock.min.js"></script>		
<script type="text/javascript">
	try{
		$G.removeBackButton();//移除返回键
		$G.setScreenKeep({
            status:true, // 设置屏幕常亮
        })
		document.querySelector(".back").onclick = function(){
			$G.exitWebApp();//退出
		}
	}catch(error){

	}
	var isSee = false;
	$(".clock_container").on("touchstart",function(){
		if(isSee){
			$(".back").css("opacity",0)
		}else{
			$(".back").css("opacity",1)
		}
		isSee = !isSee
	})

	var clock;
	var portraitH;
	var portraitM;
	var portraitS;
	var date = new Date()
	$(document).ready(function() {
		clock = $('.landscape .clock').FlipClock({
			clockFace: 'TwentyFourHourClock',
		});

		portraitH = $('.portrait .hours').FlipClock(0,{
			clockFace: 'Counter',
		});
		portraitM = $('.portrait .minutes').FlipClock({
			clockFace: 'Counter',
		});
		portraitS = $('.portrait .seconds').FlipClock({
			clockFace: 'Counter',
		});

		setInterval(function(){
			var date = new Date()
			portraitH&&portraitH.setTime&&portraitH.setTime(date.getHours());
			portraitM&&portraitM.setTime&&portraitM.setTime(date.getMinutes());
			portraitS&&portraitS.setTime&&portraitS.setTime(date.getSeconds());
		},1000)
	});
</script>
</html>